<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聊天室</title>
</head>
<body>
  <h1>聊天室</h1>
  <input type="text" id="input">
  <button onclick="send()">发送</button>
  <button onclick="join('red')">红房间</button>
  <button onclick="join('green')">绿房间</button>
  <button onclick="leave('red')">离开红房间</button>
  <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
  <!-- <script src="/socket.io/socket.io.js"></script> -->
  <script>
    let input = document.querySelector("#input")
    let socket = io('/dev')  // new Websocket('ws://localhost:8080')
    socket.on('connect', function(){
      console.log('连接成功')
      socket.send('服务器你好')
    })
    socket.on('message', function(message){
      console.log(message)
    })

    function send(){
      let val = input.value;
      socket.send(val) // socket.emit('message', val) send()方法封装
    }

    function join(name){
      socket.emit('join', name)
    }
    function join(name){
      socket.emit('leave', name)
    }

    
  </script>
</body>
</html>